import styles from './index.less'
import React, { useEffect, useState, useContext } from 'react'
import MyContent from "@/store/my-context";
import { Avatar } from 'antd'
import { CaretRightOutlined } from "@ant-design/icons";
import LoginPage from '@/pages/loginingPage'
import { getUserDetail, getAccount, quitLogin } from '@/api'
import IconFont from '@/components/iconfont'
import LoadingPage from '@/components/loadingPage'
import { getNowTimeMs } from '@/interfaces/functions'
import { userPageTopType } from '@/interfaces/types';
const UserPage: React.FC<{ userId: number }> = ({ userId }) => {
    const [userDetail, setUserDetail] = useState<any>(null)
    const { dispatch } = useContext(MyContent)
    const [isLoading, setIsLoading] = useState<boolean>(true)
    const userFollowsData: userPageTopType = [
        { text: '动态', getValue: (userDetail: any) => userDetail?.profile?.authority || 0 },
        { text: '关注', getValue: (userDetail: any) => userDetail?.profile?.follows || 0 },
        { text: '粉丝', getValue: (userDetail: any) => userDetail?.profile?.followeds || 0 }
    ]
    const [isDotDisplay, setIsDotDisplay] = useState<boolean>(true)
    useEffect(() => {
        if (userId) {
            getUserDetail({ uid: userId }).then(res => {
                if (res) {
                    setUserDetail(res)
                    // console.log(res)
                } else {
                    console.error('获取用户详情失败')
                }
            }, err => console.log(err))
        } else {
            setUserDetail(null)
        }
        return setUserDetail(null)
    }, [userId])
    return (
        <div
            className={styles['userpage']}
            onLoad={(event: any) => {
                event.stopPropagation()
                setIsLoading(false)
                console.log('onload')
                event = null
            }}>
            <div className={styles['data-page']}>
                <div className={styles['data-follows']}>
                    {
                        userFollowsData.map((item) => (
                            <a>
                                <span
                                    style={{
                                        fontSize: '20px',
                                        fontWeight: 'bold'
                                    }}
                                >
                                    {item.getValue(userDetail)}
                                </span>
                                <br />
                                <span>
                                    {item.text}
                                </span>
                            </a>
                        ))

                    }
                </div>
                <a className={styles['btn-qiandao']}>
                    <IconFont type={'iconyingbi'} />
                    <span style={{
                        marginLeft: '5px'
                    }}>
                        签到
                    </span>

                </a>
            </div>
            <div className={styles['list-container']}>
                <a className={styles['list']}>
                    <div className={styles['list-left']}>
                        <IconFont type={'iconhuiyuanVIPdengjigaojixianxing'} />
                        <span>会员中心</span>
                    </div>
                    <div className={styles['list-right']}>
                        {
                            userDetail?.userPoint?.vipType
                                ? (
                                    <>
                                        <IconFont type={'iconLv'} />
                                        <span>{userDetail?.userPoint.vipType}</span>
                                    </>
                                )
                                : (
                                    <span>未订购</span>
                                )
                        }
                        <IconFont type={'iconjiantou'} />
                    </div>
                </a>
                <a className={styles['list']}>
                    <div className={styles['list-left']}>
                        <IconFont type={'iconlevel-2-copy-copy-copy'} />
                        <span>等级</span>
                    </div>
                    <div className={styles['list-right']}>
                        <IconFont type={'iconLv'} />
                        <span>{userDetail?.level || ''}</span>
                        <IconFont type={'iconjiantou'} />
                    </div>
                </a>
                <a
                    className={styles['list']}
                    onClick={(event: any) => {
                        event.stopPropagation()
                        setIsDotDisplay(false)
                        event = null
                    }}
                >
                    <div className={styles['list-left']}>
                        <IconFont type={'iconshangcheng'} />
                        <span
                            style={{ marginRight: '5px' }}
                        >商城</span>
                        <div
                            className={styles['reddot']}
                            style={isDotDisplay
                                ? { display: 'inline-block' }
                                : { display: 'none' }
                            }

                        >
                        </div>
                    </div>
                    <div className={styles['list-right']}>
                        <IconFont type={'iconjiantou'} />
                    </div>
                </a>
            </div>
            <div className={styles['list-container']}>
                <a className={styles['list']}>
                    <div className={styles['list-left']}>
                        <IconFont type={'icongerenxinxi'} />
                        <span>个人信息设置</span>
                    </div>
                    <div className={styles['list-right']}>
                        <IconFont type={'iconjiantou'} />
                    </div>
                </a>
                <a className={styles['list']}>
                    <div className={styles['list-left']}>
                        <IconFont type={'iconbangding'} />
                        <span>绑定社交账号</span>
                    </div>
                    <div className={styles['list-right']}>
                        <IconFont type={'iconweibo'} />
                        <IconFont type={'iconjiantou'} />
                    </div>
                </a>
            </div>
            <div className={styles['list-container']}>
                <a
                    className={styles['list']}
                    onClick={(event: any) => {
                        event.stopPropagation()
                        quitLogin({ time: getNowTimeMs() }).then(res => {
                            if (res?.code === 200) {
                                console.log(res)
                                dispatch({
                                    type: "SET_USERDATA",
                                    value: { userData: null }
                                })
                            } else {
                                console.log('已经退出登录')
                            }
                        })
                        event = null
                    }}>
                    <div className={styles['list-left']}>
                        <IconFont type={'icontuichu'} />
                        <span>退出登录</span>
                    </div>
                </a>
            </div>
            {/* <LoadingPage isLoading={isLoading} /> */}
        </div>
    )
}
const LoginMenu: React.FC = () => {
    const { state,dispatch } = useContext(MyContent)
    const [userAccount, setUserAccount] = useState<any>(null)
    const [isDisplay, setIsDisplay] = useState<boolean>(false)
    useEffect(() => {
        getAccount().then(res => {
            if (res?.account?.id) {
                setUserAccount(res)
                dispatch({
                    type:'SET_USERDATA',
                    value:{userData:{uid:res.account.id}}
                })
            } else {
                setUserAccount(null)
                dispatch({
                    type:'SET_USERDATA',
                    value:{userData:null}
                })
            }
        }, err => console.log(err))
    }, [state.userData?.uid])
    useEffect(() => {
        // quitLogin().then(res=>console.log(res))
    }, [])
    return (
        <>
            <div
                className={styles["avatar-wrap"]}
                onClick={(event) => {
                    event.stopPropagation()
                    setIsDisplay(!isDisplay)
                    // console.log(userAccount)
                    // console.log(a)
                }}
            >
                <Avatar
                    style={{ verticalAlign: "middle" }}
                    size="large"
                    src={userAccount?.profile?.avatarUrl || ''}
                />
                <span>
                    {
                        userAccount?.profile?.nickname
                        || '未登录'
                    }
                </span>
                <IconFont type={'iconpaixu-xia'}/>

            </div>
            {
                isDisplay
                && (userAccount
                    ? (<UserPage userId={state.userData?.uid || 0} />) : (<LoginPage />))
            }
        </>
    )
}
export default LoginMenu